<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/loading.css" />
		<link rel="stylesheet" href="../css/home-search.css" />
		<style type="text/css">
			[v-cloak] {
				display: none !important;
			}
			
			.mui-bar .mui-title {
				right: 58px;
			}
			
			.mui-bar .mui-btn-link.mui-active, .mui-bar .mui-btn-link:active {
				color: #fff;
			}
			
			input[type=search] {
				text-align: left;
			}
		</style>
	</head>

	<body>
		<div id="pullrefresh">
			<div class="mui-scroll-wrapper" id="keysaddresslist" v-cloak>
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">
							<input type="search" class="mui-input-clear" id="searchKey" autofocus="autofocus" v-model.trim="search" placeholder="请输入关键词搜索">
					</h1>
					<button @click="searchQuery()" class="mui-btn mui-btn-link mui-pull-right">查询</button>
				</header>
				<div class="mui-content mui-scroll">
					<div id="item-member" class="mui-control-content mui-active" v-if="items != null">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" v-for="item in items">
								<a href="javascript:;" :data-item="item.id">
									<!--<img class="mui-media-object mui-pull-left" style="border-radius: 2px;" onerror="this.src='../images/32noimg.png'" v-bind:src="item.image">-->
									<img class="mui-media-object mui-pull-left lazy" style="border-radius: 2px;" v-lazy="item.image">
									<div class="mui-media-body">
										<div class="listzx" style="font-size: 16px; text-overflow: ellipsis; overflow:hidden; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{item.title}}</div>
										<p class="mui-ellipsis">{{item.creationTime}}</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div v-show="showmore" id='showmore' class="mui-control-content mui-active" style="text-align: center; line-height: 40px;font-size: 14px; color: #9999b0;">查看更多</div>
					<div v-show="datas" class="mui-control-content mui-active" style="text-align: center; line-height: 40px;font-size: 14px; color: #9999b0;">暂无数据</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/vue-lazyload.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
	// vue使用组件
	Vue.use(VueLazyload, {
		error: '../images/32noimg.png', // 错误加载展示
		loading: '../images/32noimg.png', //	加载中展示
		preLoad: 1,
		attempt: 1
	});

	var offset = 0; //当前页码
	var limit = 5; //显示条数
	var total = 0; //总条数
	var isflag = true; //分页
	var searchTxt = '';
	var waiting; //加载动画

	/*mui.init({
		pullRefresh: {
			container: "#pullrefresh", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			up: {
				height: '50px',
				auto: false,
				contentrefresh: '正在加载.....',
				contentmore: '暂无更多数据',
				callback: pullfresh
			},
		}
	})*/

	mui.plusReady(function() {
		$("#searchKey").trigger("select").focus;

		queryvm = new Vue({
			el: "#keysaddresslist",
			data: {
				search: '',
				items: null,
				datas: false,
				flag: false,
				showclear: false,
				showmore: false
			},

			methods: {
				//	关键字查询
				searchQuery: function() {
					this.showmore = false
					this.datas = false;
					this.users = null;
					this.organizations = null;
					if(this.search) {
						//this.flag = true;
						waiting = plus.nativeUI.showWaiting("数据加载中...");
						this.items = '';
						searchTxt = this.search;
						setTimeout(function() {
							querykey(searchTxt);
							queryvm.showclear = true;
						}, 1000)
					}
				},
				//	清空搜索
				showClear: function() {
					this.search = '';
					this.items = null;
					this.showclear = false;
					this.users = null;
					this.organizations = null;
				}
			}
		})

	});

	mui('body').on('tap', '#item-member .mui-table-view-cell a', function() {
		var item = this.getAttribute('data-item');
		mui.openWindow({
			url: '/html/home-detail.html',
			id: 'home-detail',
			createNew: false,
			extras: {
				'detailid': item,
				'columname': ''
			},
			show: {
				autoShow: true,
				aniShow: 'slide-in-right',
				duration: 300
			},
			waiting: {
				autoShow: false,
				title: '正在加载...'
			}
		})
	});

	// ios 查看更多
	mui('body').on('tap', '#showmore', function() {
		queryvm.showmore = false;
		if(searchTxt == '') { //判断初次进来就进行bug
			return;
		}
		console.log('limit' + (limit + 5));
		isflag = total > limit + 5 ? true : false;
		limit += 5;
		if(total > queryvm.items.length) {
			waiting = plus.nativeUI.showWaiting("数据加载中...");
			setTimeout(function() {
				querykey(searchTxt);
			}, 1000)
		}

	});

	//	搜索查询
	function querykey(key) {
		ctdj.cms.queryArticle(key, '', offset, limit, function(r) {
			if(r.success) {
				total = r.result.totalCount;
				//console.log(r.result.totalCount);
				setTimeout(function() {
					if(total == 0) {
						queryvm.flag = false;
						queryvm.datas = true;
						offset = 0; //当前页码
						limit = 5; //显示条数
					} else {
						queryvm.items = null;
						queryvm.flag = false;
						//	批量处理图片路径
						$.each(r.result.items, function(index, item) {
							if(item.image != '') { //设置相对路径
								item.image = ctdj.tools.handelImageFullUrl(item.image);
							}

							item.creationTime = item.creationTime.split('T')[0];
						});
						if(total >= r.result.totalCount) {
							queryvm.showmore = true;
						}
						total = r.result.totalCount;
						queryvm.items = r.result.items;

						setTimeout(function() {
							if(queryvm.items.length > 0) {
								$.each($(".listzx"), function(index, item) {
									console.log($(item).height());
									if($(item).height() <= 30) {
										$(item).css('line-height', '45px');
									} else {
										$(item).css('line-height', '20px');
									}
									$(item).removeClass('listzx');
								})
							}
						}, 300);
					}
				}, 500);
			}

			mui('.mui-scroll-wrapper').scroll();
			waiting.close();
		});
	}
</script>